<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 导航栏 -->
		<shopro-navbar :isBack="true">
			<view class="u-flex-1 u-flex  u-row-center u-col-center" slot="content">
				<view style="font-weight:bold">{{title}}</view>
			</view>
		</shopro-navbar>
		<view class="search-box" v-show="!isScorll" :class="!isScorll?'activeopty':'activenone'">
			<view class="searchrong">
				<!-- <u-search shape="square" action-text="" :action-style="{'display':'none'}" v-model="searchVals"
					padding="30rpx" placeholder="输入商品名称" height="64" @search="onSearch" @clear="clearSearch">
				</u-search> -->
				<u-search shape="square" action-text="" :disabled="true"
					@click="$Router.push({ path: '/pages/index/huixuan_good', query: { id: '',typeId:typeId} })"
					:action-style="{'display':'none'}" placeholder="请输入关键字" :showAction="false" height="60">
				</u-search>
			</view>
		</view>
		<view class="content-box">

			<view class="left-box">
				<view class="category-item" v-for="(item,index) in categoryList" :key="index"
					:class="{activeItem:activeIndex === index}" @click="changeCategory(item,index)">
					{{item.name}}
				</view>
			</view>
			 <view class="right-box">
         <view class="lookmore">
           <view class="lookmores" @click="jump('/pages/index/huixuan_good',{id: list_id})">查看更多</view>
           <u-icon size="28" name="arrow-right" color="#666"></u-icon>
         </view>
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="content right-boxs" @scrolltolower="lower">
          <view class="good" v-if="list.length != 0" v-for="(item,index) in list" :key="index"
            @click="$Router.push({ path: '/pages/goods/new_detail', query: { id: item.id } })">
            <view class="good-img">
              <image :src="item.image" style="border-radius: 16rpx;"></image>
            </view>
            <view class="good-info">
              <view class="title-box-body">
                <view v-if="item.sale_type == 0" class="goods-type"
                  style=" background: url('https://d-duomi.bigchun.com/images/back1.png') no-repeat!important;background-size: cover!important;">
                  商帮自营
                </view>
                <view v-if="item.sale_type == 1" class="goods-type"
                  style=" background: url('https://d-duomi.bigchun.com/images/back2.png') no-repeat!important;background-size: cover!important;">
                  商帮超市
                </view>
                <view class="goods-title  u-m-b-10 u-ellipsis-2">
                  {{item.title}}
                </view>
              </view>

              <view class="good-tag" v-if="item.service">
                <view class="tag-item" v-for="(zitem,zindex) in item.service" :key="zindex">
                  {{zitem.name}}
                </view>
              </view>
              <view class="price-box font-OPPOSANS">
                <view class="u-m-b-10">
                  <view class="">
                    <text class="price-title">会员价：</text>
                    <text class="price ">{{item.vip_price}}</text>
                  </view>
                  <!-- <view v-else>
                    <text class="price ">{{item.price}}</text>
                  </view> -->
                </view>
                <view class="">
                  <image class="good-car" src="https://d-duomi.bigchun.com/images/Group 2181.png" mode=""
                    style="width: 33rpx;height: 33rpx;"></image>
                </view>
              </view>
            </view>
          </view>
          <!-- tipText="暂无该商品，还有更多好货等着你噢~" -->
          <shopro-empty v-if="list.length == 0" marginTop="200rpx"
            :image="$IMG_URL + '/imgs/empty/empty_goods.png'"></shopro-empty>

        </scroll-view>
       </view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import HuixuanClassify from "../../components/huixuan-classify/huixuan-classify";
	import HuixuanExercise from "../../components/huixuan-exercise/huixuan-exercise";
	export default {
		components: {},
		data() {
			return {
				searchVals: '',
				isScorll: false,
				title: '',
				activeIndex: 0,
				current_page: 0,
				last_page: 1,
				sortType: 0,
				statusBarHeight: systemInfo.statusBarHeight,
				showpopup: false,
				active: "-1",
				themeColor: "#FC5351",
				// #ifdef MP-WEIXIN
				// #endif
				isRefresh: true,
				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				isScorll: false,
				sale_type: '',
				typeId: '',
				categoryList: [],
				list_id: '',
				list: [],
				systemBar: "",
				navigationBar: "",
				menu: "",
				page: 1,
				limit: 6,
				shop_sort: 0,
				shopList: [],
				stickyTop: 0,
				keyword: "",
				isVip: ''
			};
		},
		computed: {},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			let that = this;
			this.enable = true;
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});

		},
		onHide() {},
		onReachBottom() {
			this.lower();
		},
		onLoad(option) {
			this.title = decodeURIComponent(option.name);
			console.log("参数：", this.title == '商帮自营')
			if (this.title == '商帮自营') {
				this.typeId = 22
				this.sale_type = 0
			} else if (this.title == '商帮超市') {
				this.typeId = 28
				this.sale_type = 1
			}
			this.shopLists();
			this.getVip();
		},
		methods: {
      jump(path, parmas) {
        this.$Router.push({
          path: path,
          query: parmas
        });
      },
			init() {},
			// 清除输入框
			clearSearch() {
				this.searchVals = '';
			},
			// 搜索
			onSearch(e) {
				this.$Router.push(`/pages/goods/list?keywords=${e}`);
				this.searchVals = '';
			},
			changeCategory(item, index) {
				this.activeIndex = index;
				this.list_id = item.id;
				this.page = 1;
				this.list = [];
				this.shopData();
			},
			// 获取分类
			shopLists() {
				this.$https('category.getcategoryList', {
					id: this.typeId,
				}).then(res => {
					if (res.code === 1) {
						this.categoryList = res.data;
						this.list_id = this.categoryList[0].id
						this.shopData();
					}
				})
			},
			lower: function(e) {
				console.log(this.current_page)
				console.log(this.per_page)
				if (this.current_page != this.last_page) {
					this.page = this.page + 1;
					this.shopData()
				}
			},
			shopData() {
				this.$https('category.getcategoryDataList', {
					category_id: this.list_id,
					sale_type: this.sale_type,
					page: this.page
				}).then(res => {
					if (res.code === 1) {
						this.list = [...this.list, ...res.data.data];
						this.current_page = res.data.current_page;
						this.last_page = res.data.last_page;
					} else if (res.code === 401) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							url: '/pages/index/login'
						})
					}

				})
			},
			getVip() {
				this.$https('user.isVip').then(res => {
					if (res.code === 1) {
						this.isVip = res.data;
					} else if (res.code === 401) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
							url: '/pages/index/login'
						})
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.home-wrap {
		min-height: 100vh;
		background-color: #fff;
	}

	.search-box {
		width: 100%;
		height: 98rpx;
		margin-top: -6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		position: relative;

		.searchrong {
			width: 95%;
			position: relative;
			margin: 0 auto;

			.scan {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				z-index: 1222;
			}
		}
	}

	.content-box {
		display: flex;
		height: 82vh;
	}

	.left-box {
		width: 218rpx;
		display: flex;
		flex-direction: column;
		background-color: #F4F4F4;
		height: 100%;
		overflow-y: scroll;


		.category-item {
			padding: 30rpx 0;
			text-align: center;
			font-size: 28rpx;
			color: #000;
		}

		.activeItem {
			background-color: #fff !important;
		}
	}

	.right-box {
		width: calc(100vw - 218rpx);
		padding: 0 20rpx;
		height: 100%;
		overflow-y: scroll;
    position: relative;
    .lookmore{
      font-size: 24rpx;
      color: #666666;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: absolute;
      top: 0;
      right: 20rpx;
    }
    .right-boxs{
      margin-top: 40rpx;
      height: 80vh;
      overflow-y: scroll;
      .good {
        padding: 20rpx 0;
        display: flex;
        align-items: center;

        .good-img image {
          width: 180rpx;
          height: 148rpx;
        }

        .good-info {
          width: 100%;
          margin-left: 20rpx;
        }

        .goods-title {
          width: 75%;
          font-size: 26rpx;
          font-weight: 500;
          color: #000000;
          line-height: 38rpx;
          display: flex;
          align-items: flex-start;
          // overflow: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-Box;
          -webkit-Box-orient: vertical;
          -webkit-line-clamp: 1;
          /* 这里是超出几行省略 */
          overflow: hidden;

        }

        .good-tag {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin: 10rpx 0;

          .tag-item {
            margin-right: 8rpx;
            margin-bottom: 4rpx;
            padding: 8rpx 8rpx;
            font-size: 20rpx;
            font-weight: bold;
            color: #FE7F1A;
            line-height: 19rpx;
            background: #FFF0E4;
            border-radius: 4rpx;
            opacity: 1;
          }
        }

        .price-box {
          width: 100%;
          margin-top: auto;
          display: flex;
          justify-content: space-between;

          .price-title {
            font-weight: 500;
            color: #FE7F1A;
          }

          .price {
            font-size: 30rpx;
            font-weight: 500;
            color: #FE7F1A;

            &::before {
              content: '￥';
              font-size: 24rpx;
            }
          }

          .original-price {
            font-size: 20rpx;
            font-weight: 500;
            text-decoration: line-through;
            color: #c4c4c4;
          }
        }
      }
    }

	}
	.title-box-body{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}
	.goods-type {
		margin-right: 6rpx;
		width: 72rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		font-size: 16rpx;
		font-weight: 500;
		color: #FFFFFF;
		display: inline-block;
	}
</style>
